<template>
	<view class="terminal-state">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="终端回拨">
			<view class="u-m-r-20" slot="right" @click="goRecord()">
				记录
			</view>

		</u-navbar>
		<view class="flex terminal-state__header">
			<u-search placeholder="请输入编号 姓名或手机号" v-model="requstBody.agentNo" shape="square" bg-color="#f6f6f6"
				:show-action="false" @search="search" class="flex-1"></u-search>

		</view>

		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="terminal-state__item " v-for="(item,index) in terminalList" :key="index">
					<view class="flex">
						<u-image :src="thumb" width="40" height="40" class="card__icon mr-10"></u-image>
						<view class="flex-1">
							{{item.userName}}
						</view>
						<u-button type="primary" class=" u-margin-left-15" :custom-style="customSubmitStyle"
							hover-class="false" @click="goAllocate(item)">回拨</u-button>
					</view>
					<view class="flex u-margin-top-20">
						<view class="">
							ID:
						</view>
						<view class="">
							{{item.agentNo}}
						</view>
					</view>

					<view class="flex u-margin-top-10">
						<view class="">
							手机：
						</view>
						<view>
							{{item.mobileNo}}
						</view>

					</view>


				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {


				customSubmitStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					color: 'white',
					height: '60rpx',
					borderRadius: "50rpx"
				},

				thumb: "/static/image/home/icon_agent_header_2.png",
				pageNo: 1,
				pageSize: "10",
				requstBody: {
					"agentNo": "",
				},
				terminalList: [],

				scrollTop: 0,
				status: "loadmore",
				sn: "",
				size: "",

			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		onLoad(options) {
			options.sn && (this.sn = options.sn);
			options.size && (this.size = options.size);
			this.getAgentUnderList();
		},

		methods: {
			goRecord() {
				this.$u.route('packageB/pages/main/terminal/terminalIssueRecordList', {
					type: "2"
				})
			},
			goAllocate(item) {
				this.$u.route('packageB/pages/main/terminal/terminalInfoQueryRecoverIssueList', {
					"agentNo": item.agentNo,
					"userName": item.userName,
					"sn": this.sn,
					"size": this.size
				})

				// this.$u.route('pages/main/terminal/terminalAllocatedConfirm', {
				// 	"agentNo": item.agentNo,
				// 	"userName": item.userName,
				// 	"sn": this.sn,
				// 	"size": this.size
				// })
			},

			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.getAgentUnderList();
			},
			getAgentUnderList() {

				let _that = this;
				_that.$zx.terminal_api.getAgentUnderList(this.pageNo, this.pageSize, this.requstBody).then((data) => {


					_that.terminalList = _that.terminalList.concat(data);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},
			search(e) {
				console.log("e=" + e)
				this.requstBody.agentNo = e;
				this.pageNo = 1;
				this.terminalList = [];
				this.getAgentUnderList();
			}

		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;
		}

		&__item {
			background-color: white;
			border-radius: 20rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
		}
	}

	.yellow {
		color: #FF8E00;
	}

	.pop_filter {
		position: absolute;
		// top: 80rpx;

		&__title {
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		&__btn {
			background-color: #f6f6f6;
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 10rpx;
		}

		&__input {
			background-color: #f6f6f6;
			margin: 0 20rpx;
			border-radius: 10rpx;

		}

		&__select {
			background-color: #F1E8FF;
			color: #9D60FF;
			background-image: url("/static/image/home/icon_filter_checked.png");
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}
</style>